<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="assets/css/login.css"/>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="login">
    <h1>Login</h1>

    <input type="text" placeholder="邮箱" id="email" name="u"></input>

    <input type="password" placeholder="密码" name="p" id="pwdPre"></input>

    <input type="password" placeholder="确认密码" name="p" id="pwdAfe"></input>

    <button id="btn_submit" class="but">发送验证码</button>
    <button id="btn_submit2" class="but" style="display: none">发送验证码</button>
    <input type="text" placeholder="验证码" name="verifyCode" id="verifyCode"></input>
    <button id="btn_regist" class="but">注册</button>
</div>

</body>
<script>
    $(function () {
            $("#btn_submit").click(function () {

                let eamil = $("#email").val();
                let pwdPre = $("#pwdPre").val();
                let pwdAfe = $("#pwdAfe").val();
                if (pwdAfe != pwdPre) {
                    alert("两次输入的密码不一致")
                    return
                }

                $.ajax({
                    url: "http://www.test.com/emailserver/sendEmail",
                    data: {sendUser: eamil},
                    type: "POST",
                    dataType: "text",
                    success: function (data) {
                       if (data="success"){
                           resetTime();
                       } else {
                           alert(data)
                       }
                    }
                });

            });
            $("#btn_regist").click(function () {
                let eamil = $("#email").val();
                let pwdAfe = $("#pwdAfe").val();
                let verifyCode = $("#verifyCode").val();
                $.ajax({
                    url: "http://www.test.com/userserver/verifyAndInsert",
                    data: {email: eamil, pwd: pwdAfe, verifyCode: verifyCode},
                    type: "POST",
                    dataType: "text",
                    success: function (data) {
                        if ("success" == data) {
                            window.location = "http://www.test.com/test.html";
                        } else {
                            alert(data);
                        }
                    }
                });

            });

            function resetTime() {
                var second = 60;
                var timer = null;
                timer = setInterval(function () {
                    second -= 1;
                    if (second > 0) {
                        let msg = second + "秒获取验证码";
                        $("#btn_submit2").html(msg);
                        $("#btn_submit").css('display', "none");
                        $("#btn_submit2").css('background-color', "gray");
                        $("#btn_submit2").css('display', "block");

                    } else {
                        clearInterval(timer);
                        $("#btn_submit").css('display', "block");
                        $("#btn_submit2").css('display', "none");
                    }
                }, 1000);
            }
        }
    )

</script>

</html>


